<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<head>
<meta charset="utf-8">
<title>Property Search Using Mashup</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />

</head>
<body>
	<%@include file="includes/header.jsp"%>

	<div id="wrapper">
		<section id="featured"> <!-- start slider -->
		<div class="container">

			<c:if test="${sessionScope.login_status eq 'false'}">
				<div class="alert alert-danger">
					<a class="close" data-dismiss="alert">X</a> <strong>Error!</strong>
					<c:out value="${requestScope.login_error}" />
				</div>
			</c:if>
			<div class="row">
				<div class="col-lg-12 propertyTabDiv">
					<!-- Search Box -->
					<div class="searchBox">
						<div class="searchBox-Title">Property Search</div>

						<ul class="nav nav-tabs" id="propertyTab">
							<li <c:if test="${sessionScope.tab_status eq null}">class="active" </c:if> ><a href="#forRent">For Rent</a>
							<li><a href="#forSale">For Sale</a></li>
							<li><a href="#overseas">Overseas</a></li>
							<c:if test="${sessionScope.login_status eq 'true'}">
								<li><a href="#analytics">Analytics</a></li>
								<li class="<c:if test="${sessionScope.tab_status eq 'advertisement'}"> active </c:if> "><a href="#advertisement">My Advertisement</a></li>
								<li class="<c:if test="${sessionScope.tab_status eq 'profilePicture'}"> active </c:if> "><a href="#profilePicture">Profile Management</a></li>
							</c:if>
						</ul>

						<div class="tab-content btn_tab_body">
							<div class="tab-pane <c:if test="${sessionScope.tab_status eq null}"> active </c:if>" id="forRent">
								<form id="rent" class="form-horizontal"
									action="PropertySearchServlet" method="get">

									<div class="row row-centered">

										<input name="rent_sale" type="hidden" value="rent" /> <input
											name="min_price" type="hidden" value="Any Price" />
										<div class="col-xs-4 col-centered">
											<label for="inputType">Type</label> <select
												class="form-control input-sm" name="type">
												<option value="any">Any</option>
												<option value="condo">Apartment / Condo</option>
												<option value="landed">Landed House</option>
												<option value="hdb">HDB</option>
											</select>
										</div>

										<div class="col-xs-6 col-centered">
											<label for="inputLocation">Location</label> <select
												class="form-control input-sm" name="location">
												<option>Boat Quay</option>
												<option>Raffles Place</option>
												<option>Marina</option>
												<option>Chinatown</option>
												<option>Tanjong Pagar</option>
												<option>Alexandra</option>
												<option>Commonwealth</option>
												<option>Harbourfront</option>
												<option>Telok Blangah</option>
												<option>Buona Vista</option>
												<option>West Coast</option>
												<option>Clementi</option>
												<option>City Hall</option>
												<option>Clarke Quay</option>
												<option>Beach Road</option>
												<option>Farrer Park</option>
												<option>Serangoon</option>
												<option>Orchard</option>
												<option>River Valley</option>
												<option>Tanglin Holland</option>
												<option>Newton</option>
											</select>
										</div>
						</div>
						<div class="row row-centered">
										<div class="col-xs-4 col-centered">
											<label for="inputBedrooms">Bedrooms</label> <select
												class="form-control input-sm" name="bedrooms">
												<option>Any</option>
												<option>Studio</option>
												<option>1 Bedroom</option>
												<option>2 Bedrooms</option>
												<option>3 Bedrooms</option>
												<option>4 Bedrooms</option>
												<option>5 Bedrooms</option>
											</select>
										</div>

										<div class="col-xs-5 col-centered">
											<label for="inputMaxPrice">Max Price</label> <select
												class="form-control input-sm" name="max_price">
												<option>Any Price</option>
												<option>S$ 500</option>
												<option>S$ 1000</option>
												<option>S$ 1500</option>
												<option>S$ 2000</option>
												<option>S$ 2500</option>
												<option>S$ 3000</option>
												<option>S$ 4000</option>
												<option>S$ 5000</option>
												<option>S$ 6000</option>
											</select>
										</div>



										<div class="span7 pull-right btn_right">
											<button type="submit" class="btn btn-large btn-primary">Search</button>
										</div>

									</div>
								</form>


							</div>

							<div class="tab-pane" id="forSale">
								<form id="sale" class="form-horizontal"
									action="PropertySearchServlet" method="get">
									<input name="rent_sale" type="hidden" value="sale" />
									<div class="row row-centered">
										<div class="col-xs-4 col-centered">
											<label for="inputType">Type</label> <select
												class="form-control input-sm" name="type">
												<option>Any</option>
												<option>Apartment / Condo</option>
												<option>Landed House</option>
												<option>HDB</option>
											</select>
										</div>

										<div class="col-xs-6 col-centered">
											<label for="inputLocation">Location</label> <select
												class="form-control input-sm" name="location">
												<option>Boat Quay</option>
												<option>Raffles Place</option>
												<option>Marina</option>
												<option>Chinatown</option>
												<option>Tanjong Pagar</option>
												<option>Alexandra</option>
												<option>Commonwealth</option>
												<option>Harbourfront</option>
												<option>Telok Blangah</option>
												<option>Buona Vista</option>
												<option>West Coast</option>
												<option>Clementi</option>
												<option>City Hall</option>
												<option>Clarke Quay</option>
												<option>Beach Road</option>
												<option>Farrer Park</option>
												<option>Serangoon</option>
												<option>Orchard</option>
												<option>River Valley</option>
												<option>Tanglin Holland</option>
												<option>Newton</option>
											</select>
										</div>
							</div>
							<div class="row row-centered">
										<div class="col-xs-4 col-centered">
											<label for="inputBedrooms">Bedrooms</label> <select
												class="form-control input-sm" name="bedrooms">
												<option>Any</option>
												<option>Studio</option>
												<option>1 Bedroom</option>
												<option>2 Bedrooms</option>
												<option>3 Bedrooms</option>
												<option>4 Bedrooms</option>
												<option>5 Bedrooms</option>
											</select>
										</div>

										<div class="col-xs-5 col-centered">
											<label for="inputMaxPrice">Max Price</label> <select
												class="form-control input-sm" name="max_price">
												<option>Any Price</option>
												<option>S$ 200,000</option>
												<option>S$ 300,000</option>
												<option>S$ 400,000</option>
												<option>S$ 500,000</option>
												<option>S$ 700,000</option>
												<option>S$ 1000,000</option>
												<option>S$ 5000,000</option>
												<option>S$ 10,000,000</option>
												<option>S$ 20,000,000</option>
												<option>S$ 50,000,000</option>
											</select>
										</div>



										<div class="span7 pull-right btn_right">
											<button type="submit" class="btn btn-large btn-primary">Search</button>
										</div>

									</div>
								</form>
							</div>

							<div class="tab-pane" id="overseas">


								<form id="sale" class="form-horizontal"
									action="PropertySearchServlet" method="get">
									<input name="rent_sale" type="hidden" value="overseas" />
									<div class="row row-centered">
										<div class="col-xs-6 col-centered">
											<label for="inputLocation">Location</label> <select
												class="form-control input-sm" name="location">
												<option>Malaysia</option>
												<option>France</option>
												<option>India</option>
												<option>Thailand</option>
												<option>United Kingdom</option>
												<option>Australia</option>
												<option>Philippines</option>
												<option>Indonesia</option>
												<option>Japan</option>
												<option>Bahamas</option>
												<option>United States</option>
												<option>Cambodia</option>
												<option>Cyprus</option>
												<option>United Arab Emirates</option>
												<option>Spain</option>
												<option>China</option>
												<option>Switzerland</option>
											</select>
										</div>







										<div class="span7 pull-right btn_right">
											<button type="submit" class="btn btn-large btn-primary">Search</button>
										</div>

									</div>
								</form>



							</div>

							<c:if test="${sessionScope.login_status eq 'true'}">
								<div class="tab-pane" id="analytics">

									<div style="width: 1200px;">
										<div id="chart_div1"></div>
									</div>
									<div style="width: 1200px;">
										<div id="chart_div2"></div>
									</div>
									<div style="width: 1200px;">
										<div id="chart_div3"></div>
									</div>
								</div>
								<div class="tab-pane <c:if test="${sessionScope.tab_status eq 'profilePicture'}"> active </c:if>" id="profilePicture">
									<c:if test="${requestScope.upload_status eq 'true'}">
										<div class="alert alert-success">
											<a class="close" data-dismiss="alert">×</a> <strong>Success! </strong>
											<c:out value=" Profile Picture Uploaded Successfully!" />
										</div>
									</c:if>
									<c:if test="${requestScope.upload_status eq 'false'}">
										<div class="alert alert-error">
											<a class="close" data-dismiss="alert">×</a> <strong>Error!</strong>
											<c:out value="Upload Error!" />
										</div>
									</c:if>

									<form id="profileUpload" class="form-horizontal"
										enctype="multipart/form-data" action="FileUploadServlet"
										method="post"
										data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
										data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
										data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">


						<div class="modal-body">
							<div class="border-row">
								<div class="form-group">
									<label for="eventSummary" class="control-label col-xs-4">Existing Profile Picture</label>
									<div class="col-xs-8">
										<div class="icon">
														<img src="<c:url value="${sessionScope.user.pictureUrl}"/>" width="100px"
															height="100px">
										</div>
									</div>
								</div>
							</div>
							<div class="border-row">
								<div class="form-group">
									<label for="eventSummary" class="control-label col-xs-4">New Profile Picture</label>
									<div class="col-xs-8">
										<div class="fileupload fileupload-new upload-text"
														data-provides="fileupload">
														<div class="fileupload-preview thumbnail" style="border: none; ">
															</div>
														<div style="display: inline-table;">
															<input type="file"
																name="file"></span> <a href="#"
																class="btn fileupload-exists" data-dismiss="fileupload">Remove Image</a>
														</div>
	
										</div>
									</div>
								</div>
							</div>
					
										<div class="form-group">
											<div class="col-xs-offset-6 col-xs-12">
												<input type="submit" class="btn btn-primary" value="Save Changes">

											</div>
										</div>
								</div>

									</form>


								</div>
								
								<div class="tab-pane <c:if test="${sessionScope.tab_status eq 'advertisement'}"> active </c:if>" id="advertisement">

									<c:if test="${requestScope.post_add_status eq 'true'}">
										<div class="alert alert-success">
											<a class="close" data-dismiss="alert">×</a> <strong>Success!
											</strong>
											<c:out value="Your Advertisement Added Successfully!" />
										</div>
									</c:if>

									<form id="publishAdd" class="form-horizontal"
										action="AdvertiesmentServlet" method="post">
										<div class="form-group">
											<div class="col-xs-offset-3 col-xs-9">
												<label class="checkbox-inline"> <input
													type="checkbox" value="true" name="publish_add">Publish
													my profile in property point main page.
												</label>
											</div>
										</div>

										<div class="form-group">
											<label class="control-label col-xs-3" for="datepicker">Date
												of Expiry:</label>
											<div class="col-xs-9">
												<input class="datepicker" name="expiryDate"
													data-date-format="dd/mm/yyyy" placeholder="dd/mm/yyyy">
											</div>
										</div>

										<br>
										<div class="form-group">
											<div class="col-xs-offset-3 col-xs-9">
												<input type="submit" class="btn btn-primary" value="Submit">
											</div>
										</div>
									</form>

								</div>
							</c:if>
						</div>


					</div>


					<div id="myCarousel" class="carousel slide advertistment-div">
						<div class="carousel-inner">
							<c:forEach items="${sessionScope.addList}" var="add"
								varStatus="counter">

								<c:if test="${counter.count==1}">
									<div class="item active">
										<table>
											<tr>
												<td style="width: 10%;">
													<div class="icon">
														<img src="<c:url value="${add.picture}"/>" width="100px" height="100px">
													</div>
												</td>
												<td style="width: 20%;">
													<h4>
														Name : <c:out value="${add.message}" /> 
													</h4>
													<h4>
														Company : <c:out value="${add.company}" />
													</h4></td>
												<td align="left" style="width: 20%;">
													<h4 class="advertisement-call-header">
														<span class="blink"> Call Now </span> <c:out value="${add.mobileNo}" /> 
													</h4></td>
											</tr>
										</table>
									</div>
								</c:if>

								<c:if test="${counter.count!=1}">
									<div class="item">
										<table>
											<tr>
											    <td style="width: 10%;">
													<div class="icon">
														<img src="<c:url value="${add.picture}"/>" width="100px" height="100px">
													</div>
												</td>
												<td style="width: 20%;">
													<h4>
														Name : <c:out value="${add.message}" /> 
													</h4>
													<h4>
														Company : <c:out value="${add.company}" />
													</h4></td>
												<td align="left" style="width: 20%;">
													<h4 class="advertisement-call-header">
														<c:out value="${add.mobileNo}" />
													</h4>
												</td>
											</tr>
										</table>
									</div>
								</c:if>
							</c:forEach>
						</div>

						<!-- Carousel nav -->

						<a class="carousel-control left" href="#myCarousel"
							data-slide="prev"> <span
							class="glyphicon glyphicon-chevron-left ad-navigate"></span>

						</a> <a class="carousel-control right" href="#myCarousel"
							data-slide="next"> <i class="icon-circle-arrow-right"></i>
						</a>
					</div>

					<div class="searchBox">
						<div class="panel panel-primary">
							<div class="panel-heading">Properties You May Be Intrested</div>
							<div class="panel-body">
								<c:forEach items="${sessionScope.defaultProperyList}"
									var="property">
									<div class="tab-content search_result">
										<table class="search-result-table">
											<tbody>
												<tr>
													<td><a target="_blank"
														href="<c:url value='${property.link}'/>"> <c:out
																value="${property.title}" /></a></td>
												</tr>
												<tr>
													<td><c:out value="${property.description}" /></td>
												</tr>
												<tr>
													<td><a target="_blank"
														href="<c:url value='${property.sourceLink}'/>"> <c:out
																value="${property.source}" /></a></td>
												</tr>
											<!-- 	<tr>
													<td class="publish_date_td">Published on :&nbsp;<c:out
															value="${property.publishDate}" /></td>
												</tr> -->
											</tbody>
										</table>
									</div>
								</c:forEach>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		</section>
	</div>
	<%@include file="includes/footer.jsp"%>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript">

	$('.datepicker').datepicker();
	
	
	 !function(e){var t=function(t,n){this.$element=e(t),this.type=this.$element.data("uploadtype")||(this.$element.find(".thumbnail").length>0?"image":"file"),this.$input=this.$element.find(":file");if(this.$input.length===0)return;this.name=this.$input.attr("name")||n.name,this.$hidden=this.$element.find('input[type=hidden][name="'+this.name+'"]'),this.$hidden.length===0&&(this.$hidden=e('<input type="hidden" />'),this.$element.prepend(this.$hidden)),this.$preview=this.$element.find(".fileupload-preview");var r=this.$preview.css("height");this.$preview.css("display")!="inline"&&r!="0px"&&r!="none"&&this.$preview.css("line-height",r),this.original={exists:this.$element.hasClass("fileupload-exists"),preview:this.$preview.html(),hiddenVal:this.$hidden.val()},this.$remove=this.$element.find('[data-dismiss="fileupload"]'),this.$element.find('[data-trigger="fileupload"]').on("click.fileupload",e.proxy(this.trigger,this)),this.listen()};t.prototype={listen:function(){this.$input.on("change.fileupload",e.proxy(this.change,this)),e(this.$input[0].form).on("reset.fileupload",e.proxy(this.reset,this)),this.$remove&&this.$remove.on("click.fileupload",e.proxy(this.clear,this))},change:function(e,t){if(t==="clear")return;var n=e.target.files!==undefined?e.target.files[0]:e.target.value?{name:e.target.value.replace(/^.+\\/,"")}:null;if(!n){this.clear();return}this.$hidden.val(""),this.$hidden.attr("name",""),this.$input.attr("name",this.name);if(this.type==="image"&&this.$preview.length>0&&(typeof n.type!="undefined"?n.type.match("image.*"):n.name.match(/\.(gif|png|jpe?g)$/i))&&typeof FileReader!="undefined"){var r=new FileReader,i=this.$preview,s=this.$element;r.onload=function(e){i.html('<img src="'+e.target.result+'" '+(i.css("max-height")!="none"?'style="max-height: '+i.css("max-height")+';"':"")+" />"),s.addClass("fileupload-exists").removeClass("fileupload-new")},r.readAsDataURL(n)}else this.$preview.text(n.name),this.$element.addClass("fileupload-exists").removeClass("fileupload-new")},clear:function(e){this.$hidden.val(""),this.$hidden.attr("name",this.name),this.$input.attr("name","");if(navigator.userAgent.match(/msie/i)){var t=this.$input.clone(!0);this.$input.after(t),this.$input.remove(),this.$input=t}else this.$input.val("");this.$preview.html(""),this.$element.addClass("fileupload-new").removeClass("fileupload-exists"),e&&(this.$input.trigger("change",["clear"]),e.preventDefault())},reset:function(e){this.clear(),this.$hidden.val(this.original.hiddenVal),this.$preview.html(this.original.preview),this.original.exists?this.$element.addClass("fileupload-exists").removeClass("fileupload-new"):this.$element.addClass("fileupload-new").removeClass("fileupload-exists")},trigger:function(e){this.$input.trigger("click"),e.preventDefault()}},e.fn.fileupload=function(n){return this.each(function(){var r=e(this),i=r.data("fileupload");i||r.data("fileupload",i=new t(this,n)),typeof n=="string"&&i[n]()})},e.fn.fileupload.Constructor=t,e(document).on("click.fileupload.data-api",'[data-provides="fileupload"]',function(t){var n=e(this);if(n.data("fileupload"))return;n.fileupload(n.data());var r=e(t.target).closest('[data-dismiss="fileupload"],[data-trigger="fileupload"]');r.length>0&&(r.trigger("click.fileupload"),t.preventDefault())})}(window.jQuery)
	 </script>

	<script type="text/javascript">
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {
        'packages' : [ 'corechart' ]
    });
 
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
 
    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {
 
        // Create the data table.
        //var data = new google.visualization.DataTable();
        //data.addColumn('string', 'Topping');
        //data.addColumn('number', 'Slices');
        /*data.addRows([
                    <c:forEach items="${pieDataMap}" var="entry">
                        [ '${entry.key}', ${entry.value} ],
                    </c:forEach>
                    ]);*/        
        var data = google.visualization.arrayToDataTable([
                                                              ['Location', 'Hits'],
                                                              <c:forEach items="${sessionScope.pieDataListHDBHits}" var="entry">
                                                                  [ '${entry.key}', ${entry.value}],
                                                              </c:forEach>
                                                        ]);
 
                    
        // Set chart options
        var options = {
            'title' : 'HDB Property Hits By Location', //title which will be shown right above the Google Pie Chart
            is3D : true, //render Google Pie Chart as 3D
            pieSliceText: 'label', //on mouse hover show label or name of the type
            tooltip :  {showColorCode: true}, // whether to display color code for a property type on mouse hover
            'width' : 1100, //width of the Google Pie Chart
            'height' : 800 //height of the Google Pie Chart
        };
 
       
        // Instantiate and draw our chart, passing in some options.
       // var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
       // chart.draw(data, options);
        
        //var dataTable = new google.visualization.DataTable();
      //define columns
       //dataTable.addColumn('string','Location');
      // dataTable.addColumn('number', 'Hits');
      // dataTable.addRows([['D0',308], ['D1',257],['D2',375],['D3',300],['D4',375],['D5', 123]]);
        
        var options2 = {width: 1000, height: 440, is3D: false, title: 'HDB Property Hits By Location',
        		 hAxis: {
        		        direction:-1,
        		        slantedText:true,
        		        slantedTextAngle:75 // here you can even use 180
        		    }
        };
        var chart2 = new google.visualization.ColumnChart (document.getElementById('chart_div1'));
        chart2.draw(data,options2);
        
        var chart3 = new google.visualization.PieChart (document.getElementById('chart_div2'));
        chart3.draw(data,options);
        
       
    }
</script>
</body>
</html>